<template>
  <div class="app-container">
<!--    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">-->
<!--      <el-form-item label="姓名" prop="insName">-->
<!--        <el-input-->
<!--          v-model="queryParams.insName"-->
<!--          placeholder="请输入姓名"-->
<!--          clearable-->
<!--          size="small"-->
<!--          @keyup.enter.native="handleQuery"-->
<!--        />-->
<!--      </el-form-item>-->
<!--      <el-form-item label="性别" prop="insGender">-->
<!--        <el-select v-model="queryParams.insGender" placeholder="请输入性别" clearable @keyup.enter.native="handleQuery"-->
<!--                   :style="{width: '100%'}">-->
<!--          <el-option v-for="(item, index) in insGenderOptions" :key="index" :label="item.label"-->
<!--                     :value="item.value" :disabled="item.disabled"></el-option>-->
<!--        </el-select>-->
<!--      </el-form-item>-->
<!--      <el-form-item label="职称" prop="insProfessor">-->
<!--        <el-input-->
<!--          v-model="queryParams.insProfessor"-->
<!--          placeholder="请输入职称"-->
<!--          clearable-->
<!--          size="small"-->
<!--          @keyup.enter.native="handleQuery"-->
<!--        />-->
<!--      </el-form-item>-->
<!--      <el-form-item label="职务" prop="insCommander">-->
<!--        <el-input-->
<!--          v-model="queryParams.insCommander"-->
<!--          placeholder="请输入职务"-->
<!--          clearable-->
<!--          size="small"-->
<!--          @keyup.enter.native="handleQuery"-->
<!--        />-->
<!--      </el-form-item>-->
<!--      <el-form-item style="margin-left: 70px;">-->
<!--        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>-->
<!--        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>-->
<!--      </el-form-item>-->
<!--    </el-form>-->

    <el-row :gutter="10" class="mb8">
      <el-switch v-model="dataShowType" active-text="网格展示" inactive-text="列表展示">
      </el-switch>
    </el-row>

    <el-table v-if="!dataShowType" v-loading="loading" :data="instructorList" >
<!--      <el-table-column type="selection" width="55" align="center" />-->
      <el-table-column label="状态" align="center" >
        <template slot-scope="scope">
          <el-tag type="info" v-if="chooseStatus==1">等待老师确认</el-tag>
          <el-tag type="success" v-if="chooseStatus==2">老师已确认</el-tag>
          <el-tag type="danger" v-if="chooseStatus==3">老师拒绝选择</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="姓名" align="center" prop="insName" />
      <el-table-column label="像片" align="center" prop="insPicture" >
        <template slot-scope="scope">
          <img style="width: 40px;height: 40px;border-radius: 50%" :src="scope.row.insPicture"/>
        </template>
      </el-table-column>
      <el-table-column label="性别" align="center" prop="insGender" >
        <template slot-scope="scope">
          <el-tag type="danger" v-if="scope.row.insGender==0">女</el-tag>
          <el-tag v-if="scope.row.insGender==1">男</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="职称" align="center" prop="insProfessor" />
      <el-table-column label="职务" align="center" prop="insCommander" />
      <el-table-column label="本专业已招生人数" align="center" prop="checkedNumber" />
      <el-table-column label="本专业招生人数" align="center" prop="number" />
      <el-table-column label="招生专业" align="center" prop="subName" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="250px">
        <template slot-scope="scope">
          <el-button
            size="small"
            type="info"
            icon="el-icon-more"
            @click="toDetail(scope.row.id)"
          > 详细信息</el-button>
          <el-button
            v-if="chooseStatus==1"
            size="small"
            type="danger"
            icon="el-icon-close"
            @click.stop="closeIns(scope.row.id,scope.row.subId)"
          > 取消选择</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-row style="margin-left: 2%; margin-top: 50px;" v-if="dataShowType"  v-loading="loading">
      <el-col :offset="8"><div v-if="instructorList.length==0">没有数据</div></el-col>
      <el-col :lg="8" :sm="24" v-for="ins in instructorList">
        <div  class="ins-card1"  @click="toDetail(ins.id)">
          <div class="ins-header">
            <el-alert
              v-if="chooseStatus==1"
              title="等待老师确认"
              :closable="false"
              type="info"
              show-icon
            >
            </el-alert>

            <el-alert
              v-if="chooseStatus==2"
              title="老师已确认"
              :closable="false"
              type="success"
              show-icon
            >
            </el-alert>

            <el-alert
              v-if="chooseStatus==3"
              title="老师已拒绝"
              :closable="false"
              type="error"
              show-icon
            >
            </el-alert>

          </div>
          <div class="ins-footer">
            <div class="ins-left">
              <img :src="ins.insPicture" alt="">
            </div>
            <div class="ins-right">
              <div><b>姓名: </b>{{ins.insName}}</div>
              <div v-if="ins.insGender==1"><b>性别: </b>男</div>
              <div v-if="ins.insGender==0"><b>性别: </b>女</div>
              <div><b>职称: </b>{{ins.insProfessor}}</div>
<!--              <div style="font-size: 12px"><b>{{ins.subName}}专业招生人数: </b>{{ins.checkedNumber}}/{{ins.number}}</div>-->
              <div>
                <el-button
                  v-if="chooseStatus==1"
                  style="margin-left: 20%;"
                  size="mini"
                  type="danger"
                  icon="el-icon-close"
                  @click.stop="closeIns(ins.id,ins.subId)"
                > 取消选择</el-button>

                <el-button
                  v-if="chooseStatus==3"
                  style="margin-left: 20%;"
                  size="mini"
                  type="primary"
                  icon="el-icon-check"
                  @click.stop="confirmStatus(ins.id)"
                > 确认后才可继续选择导师</el-button>

              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>

<!--    <pagination-->
<!--      v-show="total>0"-->
<!--      :total="total"-->
<!--      :page.sync="queryParams.pageNum"-->
<!--      :limit.sync="queryParams.pageSize"-->
<!--      @pagination="getList"-->
<!--    />-->

  </div>
</template>

<script>
  // import {listInstructorAccepted} from "../../../api/mentor/instructor";
  import {getInfo} from "../../../api/login";
  import {getStudentDetailByUserId, cancelChooseIns, confirmStatus} from "../../../api/mentor/student";
  import {getChooseByStuId, getChooseStatus} from "../../../api/mentor/choose";
  export default {
    name: "myInstructor",
    components: {
    },
    data() {
      return {
        // 总条数
        total: 0,
        // 导师表格数据
        instructorList: [],
        insGenderOptions: [{
          "label": "男",
          "value": 1
        }, {
          "label": "女",
          "value": 0
        }],
        dataShowType:true,
        user:{},
        studentInfo:{},
        loading:false,
        chooseStatus:undefined,
      };
    },
    async created() {

      var flag = await this.checkUser()
      if (!flag){
        this.$message.warning("本菜单只对学生开放")
        return this.$router.push("/")
      }


      this.loading = true
      await this.getStudentInfo()
      await this.getInstructorByStuId()
      await this.getChooseStatus()
      this.loading = false

    },
    methods: {
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      toDetail(id){
        this.$router.push(`/instructor/detail/${id}`)
      },
      //获取学生信息
      async getStudentInfo() {
        const info = await getInfo();
        this.user = info.user
        const res = await getStudentDetailByUserId(this.user.userId)
        this.studentInfo = res.data
      },
      //获取学生选择的老师的信息
      async getInstructorByStuId() {
        const res = await getChooseByStuId(this.studentInfo.stuId)
        // console.log(res)
        if (res.data.length==0){
          await this.$alert(`当前没有已选择的导师`, "提示", {
            confirmButtonText: '确定',
            dangerouslyUseHTMLString: true,
            callback: action => {
              return this.$router.push('/student/selectInstructor')
            }
          })
          return
        }
        this.instructorList = res.data
      },
      //取消选择
      async closeIns(insId,subId) {
        const confirm = await this.$confirm("是否取消选择导师?","警告",{}).catch(err=>err)
        if (confirm=='cancel'){
          return
        }
        const res = await cancelChooseIns(insId, this.studentInfo.stuId,subId)
        // console.log(res)
        if (res.code!==200){
          return this.$message.error("系统出错了，请联系管理员")
        }
        this.$message.success("取消成功")
        await this.$router.push('/student/selectInstructor')
      },
      async checkUser() {
        // console.log(user)
        const info = await getInfo()
        let user = info.user
        for (let i = 0; i < user.roles.length; i++) {
          if (user.roles[i].roleKey == 'student') {
            return true
          }
        }
        return false
      },
      //获取导师回复选择状态
      async getChooseStatus(){
        const res = await getChooseStatus(this.studentInfo.stuId)
        if (res.data.chooseStatus){
          this.chooseStatus = res.data.chooseStatus
        }
      },
      //老师拒绝后，学生需要点击确认按钮，才可继续选择导师
      async confirmStatus(insId){
        const res = await confirmStatus(this.studentInfo.stuId,insId)
        await this.$router.push("/student/selectInstructor")
      }
    }
  };
</script>

<style>

  .ins-card1 {
    display: flex;
    flex-direction: column !important;
    justify-content: space-evenly;
    align-items: center;
    transition: all 0.5s;
    height: 280px;
    border: 1px solid #ccc;
    border-radius: 10px;
    margin:30px;
  }

  .ins-card1:hover {
    transition: all 0.3s;
    box-shadow: 0px 1px 4px 3px rgba(111,111,111,0.46);
    -webkit-box-shadow: 0px 1px 4px 3px rgba(111,111,111,0.46);
    -moz-box-shadow: 0px 1px 4px 3px rgba(111,111,111,0.46);
  }

  .ins-header {
    margin-top: 10px;
    height: 20%;
    width: 90%;
  }

  .ins-footer {
    height: 80%;
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
  }

  .ins-left {
    width: 120px;
    height: 180px;
    border: 1px solid #ccc;
    border-radius: 2px;
  }
  .ins-left img {
    width: 100%;
    height: 100%;
  }

  .ins-right {
    width: 50%;
    display: flex;
    flex-direction: column;
    /*align-items: center;*/
    justify-content: space-evenly;
  }

  .ins-right div {
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid #ccc;
  }


</style>
